
<template>
	<view>
		食集
		<Issue />
	</view>
</template>

<script>
import Issue from '../../components/issue/issue.vue';
export default {
	components: {
		Issue
	},
	data() {
		return {
			
		};
	},
	onLoad() {},
	methods: {
	
	},
	onShow() {
		uni.$emit('page', {
			show: false
		});
	}
};
</script>

<style scoped></style>


<template>
  <view>
	食集
    <Issue />
  </view>
</template>

<script>
// import { Getdata } from "../../api/index.js";
import Issue from "../../components/issue/issue.vue";
export default {
  components: {
    Issue,
  },
  data() {
    return {};
  },
  
  onShow() {
    uni.$emit("page", {
      show: false,
    });
  }
};
</script>

<style scoped></style>
<template>
	<view class="sxc">
		<!-- 搜索框 -->
		<p style="text-align: center;">食光社</p>
		<view class="seach">
			<u-search v-model="keyword" placeholder="请搜索食谱教材" @input="handleSearchInput"
				@focus="handleSearchFocus"></u-search>
		</view>
		<!-- 轮播图 -->
		<view class="uni-margin-wrap sxc_home">
			<swiper class="swiper" circular indicator-dots autoplay>
				<swiper-item v-for="item in lbtList" :index="item.id">
					<image :src="item.image" mode="" style="width: 100%;height:200px; border-radius: 10px;" />
					<view class="sxc_home_content">
						<view class="sxc_content_title">
							<h3 style="font-weight: normal;margin-top: 10px;">{{item.name}}</h3>
							<p style="margin: 5px 0 5px 0px;font-size: 14px;">{{item.remark}}</p>
							<view class="sxc_content_title_center">
								<view style="margin-bottom: 5px;">烹饪时间：{{item.cookingtime}}&nbsp;所需食材：{{item.required}}</view>
								<view>教程难度：{{item.difficulty}} </view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 滑动分类 -->
		<view class="sxc_fenlei">
			<u-scroll-list :indicator="true">
				<view v-for="(item, index) in list" :key="index"
					style="display: flex;flex-wrap: wrap;justify-content: center;margin-left: 10px;">
					<view class="sxc_home_fenlei" @click="goFenlei(item.url+'?id='+item.id)">
						<!-- <image :src="item.icon" class="sxc_fenlei_img"></image> -->
						<uni-icons :type="item.icon" size="30" class="sxc_fenlei_img"></uni-icons>
					</view>
					<view>
						<view style="margin-top: 10px;">{{item.name}}</view>
					</view>
				</view>
			</u-scroll-list>
		</view>
		<view style="height: 10px;background-color: #F5F5F5;"></view>
		<!-- 厨房宝典 -->
		<view class="sxc_book">
			<view class="sxc_book_title">厨房宝典</view>
			<view class="sxc_center">
				<u-scroll-list :indicator="true">
					<view v-for="(item,index) in chufangList" :key="index">
						<view class="sxc_chufang"
							:style="'background-image: url(' + item.Image + ');background-size: cover;padding: 20px;'">
							<view style="font-size: 20px;">{{item.name}}</view>
							<view style="color: #FFFDF5;">{{item.title}}</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>
		<!-- 热门推荐 -->
		<view class="sxc_tuijian">
			<view class="sxc_tuijian_title">热门推荐</view>
			<view class="sxc_tuijian_center">
				<view class="sxc_tuijianList" v-for="item in recommendList" :key="item.id">
					<img :src="item.img" alt="" style="width: 100%;border-radius: 10px;">
					<view style="padding: 10px 10px;">
						<p class="sxc_tuijianList_name">{{item.name}}</p>
						<view style="display: flex;align-items: center;justify-content: space-between;">
							<view style="font-size: 14px;display: flex;">
								<img :src="item.userimg" alt="" style="width: 20px;height: 20px;border-radius: 50px;">
								<span>{{item.user}}</span>
							</view>
							<view>
								<u-icon name="fingerprint">{{item.liulan}}</u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<Issue />
	</view>
</template>

<script>
	import {
		homelist,
		recommendList,
		fenleilist
	} from "../../api/index.js";
	import Issue from "../../components/issue/issue.vue";
	export default {
		components: {
			Issue,
		},
		data() {
			return {
				lbtList: [],
				recommendList: [],
				keyword: '',
				list: [],
				// {
				// 	name: "速食锅",
				// 	icon: "circle"
				// },
				// {
				// 	name: "家常锅",
				// 	icon: "circle"
				// },
				// {
				// 	name: "早餐锅",
				// 	icon: "circle"
				// },
				// {
				// 	name: "药膳锅",
				// 	icon: "circle"
				// },
				// {
				// 	name: "美味锅",
				// 	icon: "circle"
				// },
				// {
				// 	name: "健康锅",
				// 	icon: "circle"
				// }
				chufangList: [{
						name: "做饭技巧",
						title: "厨房小白必看",
						Image: "https://z1.ax1x.com/2023/12/12/piWWNnI.png"
					},
					{
						name: "厨房用具",
						title: "厨房好物推荐",
						Image: "https://z1.ax1x.com/2023/12/12/piWWhNT.png"
					},
					{
						name: "专属教程",
						title: "教你做好菜",
						Image: "https://z1.ax1x.com/2023/12/12/piWWNnI.png"
					}
				]
			}
		},
		onLoad() {
			homelist().then((res) => {
				// console.log(res.data);
				this.lbtList = res.data
			});
			recommendList().then(res => {
				this.recommendList = res.data
			})
			fenleilist().then(res => {
				this.list = res.data
			})
		},
		onShow() {
			uni.$emit("page", {
				show: false,
			});
		},
		methods: {
			handleSearchInput(value) {
				// 处理搜索框输入事件的逻辑
				// console.log('搜索框输入值：', value);
			},
			handleSearchFocus() {
				// 处理搜索框聚焦事件的逻辑
				// console.log('搜索框被聚焦了');
				// 在这里执行跳转搜索页面的操作
				this.goSearch();
			},
			goSearch() {
				// 执行跳转搜索页面的操作
				// console.log('跳转搜索页面');
				uni.navigateTo({
					url: "/pages/home/seach"
				})
			},
			goFenlei(val) {
				uni.navigateTo({
					url: val
				})
				console.log(val);
			}
		}
	}
</script>

<style scoped>
	.sxc {
		width: 100vw;
		/* height: 1200px; */
	}

	.seach {
		padding: 20px;
	}

	.sxc_home {
		width: 100%;
		height: 300px;
		/* background-color: #ff0; */
		position: relative;
	}

	.swiper {
		display: contents;
	}

	.sxc_home_content {
		width: 95%;
		height: 120px;
		background-color: #fff;
		box-shadow: 0px 3px 10px 0px #999;
		position: absolute;
		left: 9px;
		top: 150px;
		border-radius: 10px;
	}

	.sxc_content_title {
		/* background-color: chocolate; */
		padding: 0 20px;
		width: 80%;
		height: 120px;
		margin: 0 auto;
	}

	.sxc_content_title_center {
		font-size: 12px;
		margin-top: 10px;
	}

	.sxc_fenlei {
		height: 120px;
	}

	.sxc_home_fenlei {
		width: 60px;
		height: 70px;
		border-radius: 50px;
		background-color: #FFD54D;
		margin: 0 5px 0 5px;
		text-align: center;
	}

	.sxc_fenlei_img {
		margin-top: 15px;
		display: inline-block;
		font-size: 40px;
	}

	.sxc_book {
		width: 100%;
		height: 170px;
		background-color: #FFF;
		padding: 20px 0 0 10px;

		.sxc_book_title {
			padding: 0 0 0 10px;
			border-left: 5px solid #FDCE40;
			margin-bottom: 10px;
		}

		.sxc_center {
			.sxc_chufang {
				width: 170px;
				height: 100px;
				/* background-color: blueviolet; */
				margin-right: 10px;
				padding: 10px;
				color: #fff;
				border-radius: 10px;
			}
		}
	}

	.sxc_tuijian {
		/* height: 100%; */
		padding: 20px 10px 0 10px;

		.sxc_tuijian_title {
			padding: 0 0 0 10px;
			border-left: 5px solid #FDCE40;
			margin-bottom: 10px;
		}

		.sxc_tuijian_center {
			/* height: 800px; */
			padding: 0 10px;
			column-count: 2;
			column-gap: 20px;
			/* width: 100%; */

			/* overflow-y: scroll; */
			/* display: flex; */
			.sxc_tuijianList {
				width: 100%;
				/* height: 520rpx; */
				border-radius: 20rpx;
				margin-bottom: 10px;
				box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.5);
				display: inline-block;

				.sxc_tuijianList_name {
					text-indent: 1px;
					margin: 10px 0;
				}
			}
		}
	}
</style>

